SVGの記述方法 #SVG

SVGの書き方についてのまとめです。
SVGについての前提知識はこちらの記事を参照してください。
SVGの描画領域
 SVGの扱い方

図形

SVGで描画できる図形(9種類)

図形	タグ
四角形	rectタグ
円	circleタグ
楕円	ellipseタグ
直線	lineタグ
折れ線	polylineタグ
多角形	polygonタグ
パス	pathタグ
画像	imageタグ
文字列	textタグ

四角形

属性	内容
x,y	左上座標
width	幅
height	高さ
rx,ry(オプション)	角丸
fill	塗り色

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="380" height="180" rx="10" ry="10" fill="#e74c3c" />
</svg>

円

属性	内容
cx,cy	中心座標
r	半径
fill	塗り色

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" />
</svg>

楕円

属性	内容
cx,cy	中心座標
rx	半径(X軸方向)
ry	半径(Y軸方向)
fill	塗り色

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="200" cy="100" rx="200" ry="100" fill="#e74c3c" />
</svg>

直線(線分)

属性	内容
x1,y1	始点
x2,y2	終点
stroke	線の色

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="400" y2="200" stroke="#e74c3c" />
</svg>

折れ線

points属性にX座標、Y座標の組をカンマか空白区切りで必要な数だけ並べます。

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="100,0 200,50 200,150 100,200 0,150 0,50" stroke="#e74c3c" fill="none" />
</svg>

多角形

points属性にX座標、Y座標の組をカンマか空白区切りで必要な数だけ並べます。
poylineとの違いは、終点から始点に線がつながることです。

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,0 200,50 200,150 100,200 0,150 0,50" stroke="#e74c3c" fill="none" />
</svg>

パス

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 134">
  <path d="
    M133 50
    s0-50-66-50
    S0 50 0 50
    l133 33
    s0 50-66 50
    S0 83 0 83

    M133 0
    L200 133 266 0

    M360 83
    l40 0
    s0 50-66 50-66-66-66-66
    S267 0 333 0 400 50 400 50" 

    fill="none" stroke="#e74c3c"/>
</svg>

コマンド

大文字/小文字	座標
大文字	絶対座標による指定
小文字	カレント座標からの相対座標による指定

svg

 <!-- 移動(Move Toコマンド) -->
 M x y
 m dx dy

 <!-- 線を描画(Line Toコマンド) -->
 L x y
 l dx dy

 <!-- 水平線を描画 -->
 H x 
 h dx

 <!-- 垂直線を描画 -->
 V y
 v dy

 <!-- Close Pathコマンド パスを閉じる -->
 Z
 z

 <!-- 三次ベジェ曲線 -->
 C x1 y1, x2 y2, x y // x,yは線の終点　x1,y1は曲線の始点向けの制御点　x2,y2は曲線の終点向けの制御点
 c dx1 dy1, dx2 dy2, dx dy

 <!-- 三次ベジェ曲線のセットをつなぎ合わせるためのショートカット -->
 S x2 y2, x y
 s dx2 dy2, dx dy

 <!-- 二次ベジェ曲線 -->
 Q x1 y1, x y
 q dx1 dy1, dx dy

 <!-- 二次ベジェ曲線のセットをつなぎ合わせるためのショートカット -->
 T x y
 t dx dy

 <!-- 円弧　半径 回転角度 長短 回転方向 終点座標 -->
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

画像

属性	内容
x,y	左上座標
width	幅
height	高さ
xlink:href	表示する画像のURL
preserveAspectRatio	画像のアスペクト比と異なる際の表示方法

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0" width="400" height="200" xlink:href="image.jpg" />
</svg>

文字列

HTMLと違い、自動的には折り返しが行われません。

テキスト描画とスタイル指定

属性	内容
x,y	描画位置
font-family(オプション)	字体
font-weight(オプション)	ウェイト
font-size(オプション)	サイズ
font-style(オプション)	スタイル
text-decoration(オプション)	装飾

文字装飾はtextタグ内でtspanタグを使って部分的に適用することも可能です。

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="20" font-family="serif" font-weight="bold" font-size="20" font-style="italic" text-decoration="underline" fill="#e74c3c">
    テキスト
    <tspan font-size="10" fill="#333">
      テキスト
    </tspan>
    テキスト
  </text>
</svg>

text-anchor属性

右寄せや中央寄せも指定できます。

値	内容
start(デフォルト)	中心点から描画開始(右に寄る)
middle	中心点を中心に描画
end	中心点で描画終了(左に寄る)

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="15" text-anchor="start">中心から描画開始</text>
  <text x="200" y="65" text-anchor="middle">中心を中央に描画</text>
  <text x="200" y="115" text-anchor="end">中心で描画終了</text>
</svg>

文字・単語間隔・位置の調整

属性	内容
letter-spacing	文字の間隔
word-spacing	単語の間隔

svg

 <svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
   <text x="0" y="20" letter-spacing="10" word-spacing="10">
     テキスト テキスト
   </text>
 </svg>

パスへの流し込み

ドロー系のグラフィックツールによくある、パスへのテキストの流し込みも可能です。
pathタグ側でid属性を定義しておき、textタグのxlink:href属性でそれを参照するだけです。

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <path id="path"
    d="
      M-0.5,200
      c400,0,400,1,400-200"
    stroke="#333" fill="none" />
  <text font-size="20" dy="-5">
    <textPath xlink:href="#path">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </textPath>
  </text>
</svg>

長さの単位

※svgタグの属性によるスケーリングなどによって基準となる1pxの長さが変化します。

単位	内容
px	ピクセル
pt	ポイント(1.25px)
pc	パイカ(15px)
mm	ミリメートル(3.543307px)
cm	センチメートル(35.43307px)
in	インチ(90px)
em	現在のフォントの大きさ
ex	現在のフォントでの文字xの高さ
%	ビューポートに対する割合

スタイル

SVG要素のタグに直接スタイル付けプロパティを付与します。
CSSを用いてスタイル付けプロパティを指定します。
座標以外のスタイル付けはCSSで行うことが可能です。

属性	内容	値
fill	塗りの色	CSSと同様の色名や数値指定(noneは描画しない)
stroke	輪郭線の色	CSSと同様の色名や数値指定(noneは描画しない)
stroke-width	線幅	0以上の数値(小数も可)
stroke-linecap	線の端の形状	butt(そのまま)/round(丸)/square(長さを線幅の半分延長)
stroke-linejoin	線の接続部分の形状	miter(尖らせる)/round(丸)/bevel(面取り)
stroke-miterlimit	stroke-linejointがmiterからbebelに切り替わる閾値	大きくすると鋭くなる(デフォルトは4)
stroke-dasharray	破線	「長さ間隔」の順に指定(複数指定可能)
stroke-opacity	輪郭線の透明度	0.0(透明)～1.0(不透明)
opacity	塗りの透明度	0.0(透明)～1.0(不透明)

塗りの色

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" />
</svg>

輪郭線の色

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" stroke="#e74c3c" fill="none"/>
</svg>

線幅

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" stroke="#e74c3c" stroke-width="6" fill="none"/>
</svg>

端点の形状

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="20" x2="380" y2="20" stroke="#e74c3c" stroke-width="20" stroke-linecap="butt" />
  <line x1="20" y1="50" x2="380" y2="50" stroke="#e74c3c" stroke-width="20" stroke-linecap="round" />
  <line x1="20" y1="80" x2="380" y2="80" stroke="#e74c3c" stroke-width="20" stroke-linecap="square" />
</svg>

接続点の形状

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,20 100,100 180,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" />
  <polyline points="120,140 200,60 280,140"stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="round" />
  <polyline points="220,20 300,100 380,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="bevel" />
</svg>

miter と stroke-miterlimit

svg

<svg width="220" height="120" viewBox="0, 0, 220, 120" xmlns="http://www.w3.org/2000/svg">
  <polyline points="20,20 50,100 90,20" stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="2" />
  <polyline points="120,20 160,100 200,20"stroke="#e74c3c" fill="none" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="4" />
</svg>

破線

svg

<svg width="220" height="120" viewBox="0, 0, 220, 120" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="20" x2="190" y2="20" stroke="#e74c3c" stroke-width="2" stroke-dasharray="8 8" />
  <line x1="10" y1="40" x2="190" y2="40" stroke="#e74c3c" stroke-width="2" stroke-dasharray="4 4" />
  <line x1="10" y1="60" x2="190" y2="60" stroke="#e74c3c" stroke-width="2" stroke-dasharray="8 8" stroke-linecap="round" />
  <line x1="10" y1="80" x2="190" y2="80" stroke="#e74c3c" stroke-width="2" stroke-dasharray="4 4" stroke-linecap="round" /> 
</svg>

透明度

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="90" fill="#e74c3c" opacity="0.5"/>
  <circle cx="300" cy="100" r="90" stroke="#e74c3c" fill="none" stroke-opacity="0.5"/>
</svg>

スタイルの優先度

優先度：インラインCSS>CSS>属性
タグのfill属性に色と指定しても、実際の描画色はCSSで指定した色になります。
インラインでstyle="fill:色"で指定するとインラインのstyle優先になります。

マーカー

輪郭線のスタイルに加えて、line、polyline、polygon、pathに適用できます。
markerタグの内部に記述した図形がそのままマーカーの形状になります。
すべての図形タグが使用できます。

マーカー側

属性	内容
markerWidth	マーカー図形の幅
markerHeight	マーカー図形の高さ
refX	マーカーを配置する頂点のX座標
refY	マーカーを配置する頂点のY座標
id	参照用の名前
markerUnits	strokeWidth(線幅に合わせる)デフォルト/userSpaceOnUse(線幅に合わせない)
orient	回転の角度を度数で指定/auto

マーカーを付ける図形側

属性	内容
marker-start	始点
marker-end属性	終点
marker-mid属性	始点終点以外の頂点に描画するマーカー

svg

<svg width="200" height="340" viewBox="0, 0, 200, 340" xmlns="http://www.w3.org/2000/svg">

  <marker id="maerker1" markerWidth="8" markerHeight="8" refX="4" refY="4">
    <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
  </marker>

  <marker id="maerker2" markerWidth="8" markerHeight="8" refX="4" refY="4" markerUnits="userSpaceOnUse">
    <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
  </marker>

  <polyline points="10,10 100,50 190,10" stroke="#e74c3c" stroke-width="2" marker-start="url(#maerker1)" fill="none" />
  <polyline points="10,60 100,100 190,60" stroke="#e74c3c" stroke-width="2" marker-mid="url(#maerker1)" fill="none" />
  <polyline points="10,110 100,150 190,110" stroke="#e74c3c" stroke-width="2" marker-end="url(#maerker1)" fill="none" />

  <polyline points="10,160 100,200 190,160" stroke="#e74c3c" stroke-width="2" marker-start="url(#maerker2)" fill="none" />
  <polyline points="10,210 100,250 190,210" stroke="#e74c3c" stroke-width="2" marker-mid="url(#maerker2)" fill="none" />
  <polyline points="10,260 100,300 190,260" stroke="#e74c3c" stroke-width="2" marker-end="url(#maerker2)" fill="none" />

</svg>

グラデーション

グラデーションはCSSのみでは実現できません。

タグ	内容
linearGradient	線形グラデーション
meshgradient	グラデーションメッシュ
radialGradient	円形グラデーション
stop	色指定ポイント

線形グラデーション

linearGradientタグを使用して、事前にグラデーションを定義します。

属性	内容
id	図形からの参照用
x1、y1	グラデーションの方向や範囲(0%)
x2, y2	グラデーションの方向や範囲(100%)

stop

linearGradientの子要素に複数のstopタグを書いて色の変化を定義します。

属性	内容
offset	色を指定する位置を指定
stop-color	色を指定
stop-opacity	色に透明度を適用

fillへの適用

svg

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>

  <rect x="10" y="10"  width="180" height="80" fill="url(#gradation)" />

</svg>

strokeへの適用

svg

<svg width="200" height="100" viewBox="0, 0, 200, 100" xmlns="http://www.w3.org/2000/svg">

  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>

  <rect x="10" y="10" width="180" height="80" stroke-width="10" fill="none" stroke="url(#gradation)" />

</svg>

gradientUnits

属性x1, y1, x2, y2 に対する座標系を定義します。

値	内容
userSpaceOnUse	適用された図形ごとのローカルな座標
objectBoundingBox(デフォルト)	ユーザー座標系上の座標

userSpaceOnUseの場合

svg

<svg width="400" height="400" viewBox="0, 0, 400, 400" xmlns="http://www.w3.org/2000/svg">

  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>

  <rect x="10" y="10"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="110"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="210"  width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="310"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="10"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="110"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="210"  width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="310"  width="180" height="80" fill="url(#gradation)" />

</svg>

objectBoundingBoxの場合

svg

<svg width="400" height="400" viewBox="0, 0, 400, 400" xmlns="http://www.w3.org/2000/svg">

  <linearGradient id="gradation" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#F36265" stop-opacity="1" />
    <stop offset="100%" stop-color="#961276" stop-opacity="0" />
  </linearGradient>

  <rect x="10" y="10" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="110" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="210" width="180" height="80" fill="url(#gradation)" />
  <rect x="10" y="310" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="10" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="110" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="210" width="180" height="80" fill="url(#gradation)" />
  <rect x="210" y="310" width="180" height="80" fill="url(#gradation)" />

</svg>

spreadMethod

グラデーションの繰り返しの方法を指定します。

デフォルトでは繰り返しは行われません。
範囲外の色はグラデーションの両端の色で塗りつぶされます。

値	内容
repeat	0％～100％の範囲の色が繰り返し適用される
reflect	奇数番目の繰り返しがグラデーションの方向が逆になり継ぎ目のないグラデーションになる

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

  <linearGradient id="gradation1" x1="0%" y1="0%" x2="50%" y2="50%" spreadMethod="repeat">
    <stop offset="0%" stop-color="#F36265"/>
    <stop offset="100%" stop-color="#961276"/>
  </linearGradient>

  <linearGradient id="gradation2" x1="0%" y1="0%" x2="50%" y2="50%" spreadMethod="reflect">
    <stop offset="0%" stop-color="#F36265"/>
    <stop offset="100%" stop-color="#961276"/>
  </linearGradient>

  <rect x="10" y="10" width="180" height="80" fill="url(#gradation1)" />
  <rect x="10" y="110" width="180" height="80" fill="url(#gradation2)" />

</svg>

円形グラデーション

radialGradientタグを使用して、事前にグラデーションを定義します。

属性	内容
cx、cy	中心点
r	半径
fx、fy	焦点(デフォルトはcx,cyと同じ)

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

  <radialGradient id="gradation" cx="50%" cy="50%" r="100%" fx="75%" fy="75%">
    <stop offset="0%" stop-color="#fff" />
    <stop offset="100%" stop-color="#961276" />
  </radialGradient>

  <rect x="10" y="10" width="180" height="180" fill="url(#gradation)" />

</svg>

パターン

任意の図形のグループを図形の背景として繰り返し描画します。
ビットマップ画像はもちろん、SVGで描画した任意の図形がパターンとして利用できます。
patternタグの子要素としてパターンとなる図形を定義します。

属性	内容
id	参照用
viewBox	描画領域の定義
x、y	適用先でパターンを表示する基準位置
width、height	適用先でパターンを表示するサイズ

fillへの適用

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">

  <pattern id="gradation" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <rect x="0" y="0" width="200" height="100" fill="url(#gradation)" />

</svg>

stroke への適用

stroke属性にパターンの指定を記述できます。

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">

  <pattern id="gradation" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <rect x="0" y="0" width="200" height="100" fill="none" stroke-width="10" stroke="url(#gradation)" />
</svg>

preserveAspectRatio

viewBoxのサイズとwidth、heightのアスペクト比が異なる際の表示方法の指定です。

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

  <pattern id="gradation1" viewBox="0 0 8 16" x="0" y="0" width="0.1" height="0.2" preserveAspectRatio="xMidYMid">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <pattern id="gradation2" viewBox="0 0 8 16" x="0" y="0" width="0.1" height="0.2" preserveAspectRatio="none">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <rect x="0" y="0" width="200" height="100" fill="url(#gradation1)" />

  <rect x="0" y="110" width="200" height="100" fill="url(#gradation2)" />

</svg>

patternUnits

値	内容
objectBoundingBox(デフォルト)	ユーザー座標系上の座標
userSpaceOnUse	適用された図形ごとのローカルな座標

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

   <pattern id="gradation1" viewBox="0 0 16 16" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
     <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
     <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
     <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <pattern id="gradation2" viewBox="0 0 16 16" x="0" y="0" width="0.1" height="0.2">
    <rect x="0" y="0" width="4" height="4" fill="#ff6b6b"></rect>
    <rect x="8" y="0" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="0" y="8" width="4" height="4" fill="#48dbfb"></rect>
    <rect x="8" y="8" width="4" height="4" fill="#ff6b6b"></rect>
  </pattern>

  <rect x="0" y="0" width="200" height="100" fill="url(#gradation1)" />

  <rect x="0" y="110" width="200" height="100" fill="url(#gradation2)" />

</svg>

foreignObject

SVGにXHTMLを埋め込みます。
foreingObjectの内部は完全にXHTMLの規則が適用されます。
(テキストの自動折り返しなど)

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

  <foreignObject x="10" y="10" width="180" height="180">
    <p xmlns="http://www.w3.org/1999/xhtml" style="font-size:16px; color:#0abde3">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </foreignObject>

</svg>

グループ化

メリット

共通の属性を一括して指定できる
全体をまとめて移動できる

グループ化と属性の一括指定

gタグの内部に図形タグを記述します。
gタグにはfillやstrokeのような共通の属性が指定でき、内部の図形に引き継がれます。
(内部の図形に指定が優先)

svg

<svg width="200" height="200" viewBox="0, 0, 200, 200" xmlns="http://www.w3.org/2000/svg">

  <g fill="#feca57" stroke="#ff6b6b" stroke-width="2">
    <circle cx="60" cy="60" r="40" />
    <rect x="10" y="110" width="180" height="80" />
  </g>

</svg>

use

グループや図形のコピーを別の場所に表示します。

属性	内容
xlink:href	コピー元の図形のidを指定
x、y	表示位置を指定

svg

<svg width="200" height="400" viewBox="0, 0, 200, 400" xmlns="http://www.w3.org/2000/svg">

  <g id="group">
    <circle cx="50" cy="50" r="50" fill="#e55039"/>
    <rect x="0" y="110" width="200" height="80" fill="#6a89cc" />
  </g>

  <use x="0" y="200" xlink:href="#group"/>

</svg>

symbol

useタグで参照するための図形を定義します。

gタグ	symbolタグ
自身も表示される	自身は表示されない
viewBox属性を指定できない	viewBox属性を指定できる
preserveAspectRatio属性を指定できない	preserveAspectRatio属性を指定できる

svg

<svg width="200" height="300" viewBox="0, 0, 200, 300" xmlns="http://www.w3.org/2000/svg">

  <symbol id="group" viewBox="0 0 200 300">
    <circle cx="50" cy="50" r="50" fill="#e55039"/>
    <rect x="0" y="110" width="200" height="80" fill="#6a89cc" />
  </symbol>

  <use x="0" y="0" xlink:href="#group"/>
  <use x="0" y="200" xlink:href="#group" width="50%" height="50%" />

</svg>

defs

表示しない図形をまとめます。
使用例：テキストを流し込むためのパスを非表示にします。

svg

<svg width="400" height="200" viewBox="0, 0, 400, 200" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <path id="rail"
      d="
        M-0.5,200
        c400,0,400,1,400-200"/>
  </defs>

  <text>
    <textPath xlink:href="#rail">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </textPath>
  </text>
</svg>

リンク

※textタグ部分をクリックしても下にあるリンクを有効にするために「pointer-events="none"」を指定します。

svg

<svg width="100" height="100" viewBox="0, 0, 100, 100" xmlns="http://www.w3.org/2000/svg">

  <a xlink:href="https://qiita.com/" target="_blank">
    <circle cx="50" cy="50" r="40" stroke="#c44" fill="#fee" />
  </a>

  <text x="27" y="55" pointer-events="none" font-size="20" stroke="#e74c3c">
    push
  </text>

</svg>

transform

図形の変形ができます。

値	内容
translate(tx,ty)	並行移動
scale(sx,sy)	拡大縮小
rotate(angle,cx,cy)	回転
skewX(angle)	せん断(横)
skewY(angle)	せん断(縦)
matrix(a,b,c,d,e,f)	変換行列

空白区切りで複数指定可能です。
後に書いたものから順に適用されていくので、記述する順序が重要です。

図形自体のx、y属性などは変換後の座標系での指定になります。
transform属性はgタグやuseタグにも指定できます。

svg

<svg width="300" height="600" viewBox="0, 0, 300, 600" xmlns="http://www.w3.org/2000/svg">

  <rect x="50" y="0" width="100" height="60" fill="#1abc9c" />
  <rect x="50" y="100" width="100" height="60" fill="#f1c40f" transform="translate(20,0)" />
  <rect x="50" y="200" width="100" height="60" fill="#3498db" transform="scale(1,1)" />
  <rect x="50" y="300" width="100" height="60" fill="#9b59b6" transform="rotate(45 100 330)" />
  <rect x="50" y="400" width="100" height="60" fill="#34495e" transform="skewX(10)" />
  <rect x="50" y="500" width="100" height="60" fill="#95a5a6" transform="skewY(10)" />

</svg>

ツール

SVG Circle/Ellipse to Path Converter
円と楕円をパスに変換できます。